<template>
  <div class="returnTask">
    <my-head title="返修任务"/>

    <!--    <mu-text-field v-model="value" placeholder="搜索" @keyup.enter.native="searchData()" class='search'><i class="iconfont icon-search" @click="searchData()"></i></mu-text-field>-->

    <mu-paper :z-depth="1" class="loadmore-wrap" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mu-container ref="container" class="loadmore-content">
        <mu-load-more :loading="loading" @load="load" :refreshing="refreshing" @refresh="refresh">
          <mu-container>
            <mu-paper :z-depth="1">
              <mu-data-table stripe :loading="tableLoading" :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list"  @row-click="openHead">
                <template slot="header" slot-scope="scope">
                  <tr>
                    <th style="padding-left: 5px;">任务类型</th>
                    <th>借车人</th>
                    <th>借车地点</th>
                    <th>借车原因</th>
                    <th>数量</th>
                  </tr>
                </template>
                <template slot-scope="scope">
                  <td>{{scope.row.borrowType}}</td>
                  <td>{{scope.row.borrower}}</td>
                  <td>{{scope.row.borrowPlace|ellipsis2}}</td>
                  <td>{{scope.row.borrowReason|ellipsis}}</td>
                  <td>{{scope.row.borrowQtyRatio}}</td>
                </template>
              </mu-data-table>
            </mu-paper>
          </mu-container>
        </mu-load-more>
      </mu-container>
    </mu-paper>

    <mu-dialog width="360" transition="slide-bottom" style="padding: 10px;" fullscreen :open.sync="openHeadFlag" :overlay-close="false">
      <mu-appbar color="primary" title="返修任务详情">
        <mu-button slot="left" icon @click="openHeadFlag = false">
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat  @click="openHeadFlag = false">
          关闭
        </mu-button>
      </mu-appbar>
      <mu-flex v-if="progress">
        <mu-linear-progress size="10" color="secondary"></mu-linear-progress>
      </mu-flex>
      <div transition="slide-bottom" style="padding: 10px; height:300px;">
        <br>
        <p>借车单号：{{infoRow.borrowCode}}</p>
        <br>
        <p>借车人：{{infoRow.borrower}}</p>
        <br>
        <p>借车地点：{{infoRow.borrowPlace}}</p>
        <br>
        <p>借车原因：{{infoRow.borrowReason}}</p>
        <br>
        <p>任务类型：{{infoRow.borrowType}}</p>
        <br>
        <p>已完成数量/总数量：{{infoRow.borrowQtyRatio}}</p>
        <br>
        <br>
        <div class="cancelBtn">
          <mu-button slot="left" large color="red" @click="openHeadFlag = false">
            取消
          </mu-button>
          <mu-button slot="right" large color="primary"  @click="openDetailMethod" :disabled="getTaskBtnStatus">
            领取任务
          </mu-button>
        </div>
      </div>
    </mu-dialog>

    <!--vin明细显示 20230403-->
    <mu-dialog width="360" transition="slide-bottom" style="padding: 10px;" fullscreen :open.sync="openDetailFlag" :overlay-close="false">
      <mu-appbar color="primary" title="返修任务明细">
        <mu-button slot="left" flat @click="returnHead">
          返回
        </mu-button>
        <mu-button slot="right" flat  @click="closeDetail">
          关闭
        </mu-button>
      </mu-appbar>
      <div transition="slide-bottom" style="padding: 10px; height:700px;">
        <mu-paper :z-depth="1" class="loadmore-wrap" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
          <mu-container ref="container" class="loadmore-content">
            <mu-load-more  :refreshing="refreshingDetail" @refresh="refreshDetail" :loading="loadingDetail" @load="loadDetail"><!---->
                <mu-data-table stripe :loading="tableLoading"  :columns="returnDetailColumns" :sort.sync="sort" @sort-change="handleSortChange" :data="returnDetailList"  @row-click="confirmChose">
                  <template slot-scope="scope">
                    <td>{{scope.row.vin|ellipsisVin}}</td>
                    <td>{{scope.row.locationCode}}</td>
                  </template>
                </mu-data-table>
            </mu-load-more>
          </mu-container>
        </mu-paper>
      </div>
    </mu-dialog>

    <mu-dialog title="是否确认选择?" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="isuredoneDialog">
      <mu-button slot="actions" flat color="primary" @click="userAction()">是</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeThisConfirm">否</mu-button>
    </mu-dialog>


  </div>

</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'returnTask',
  data () {
    return {
      openHeadFlag: false,//领取单号详情界面显示标识
      openDetailFlag: false,//领取vin码详情界面显示标识
      progress:false,//进度条是否显示
      num: 10,
      refreshing: false,
      refreshingDetail: false,
      text: 'List',
      loading: false,
      loadingDetail: false,
      tableLoading: true,
      value: '',
      wrapperHeight: 0,
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
        { title: '任务类型', name: 'type', align: '', width: 50},
        { title: '借车人',  name: 'VIN', align: '', width: 70 },
        { title: '借车地点', name: 'location',  align: '', width: 80},
        { title: '借车原因', name: 'reason',  align: '', width: 100},
        { title: '数量', name: 'qty',  align: '', width: 60}
      ],
      returnDetailColumns: [
        { title: 'VIN',  name: 'VIN', align: ''},
        { title: '库位', name: 'location',  align: '', width: 100},
      ],
      infoRow:[],
      timeInterval: null,
      isuredoneDialog: false,//确认vin码弹窗标识
      taskTime:60,//默认60秒
      //分页查询
      list: [],
      page: 0,
      isLoadData: true,
      requestOnce: true,
      returnDetailList: [],//vin明细
      pageDetail: 0,
      isLoadDetailData: true,
      requestDetailOnce: true,
      getTaskBtnStatus:false,//领取按钮禁用状态 true 禁用，false启用
    }
  },
  components: {
    myHead
  },
  methods: {
    openHead(index, row, event){
      this.openHeadFlag = true;
      this.infoRow=row;
      this.progress=false;
      clearInterval(this.timeInterval);
    },
    openDetailMethod(){
      //console.log("in  openDetail");
      this.tableLoading = true;
      this.progress=true;
      this.getTaskBtnStatus=true;
      let data = Object.assign({},this.$store.state.user,{
        content: {
          borrowCode: this.infoRow.borrowCode,
          page: this.pageDetail
        }
      });
      //console.log("this.requestDetailOnce="+this.requestDetailOnce);
      if(this.requestDetailOnce){
        this.requestDetailOnce = false;
        this.common.reqData(api.app('returnSingleTaskQuery'), data, res=>{
          this.tableLoading = this.loading =this.refreshing=this.refreshingDetail= false;
          let datas = res.data;
          //console.log(JSON.stringify(datas))
          if(datas.content.tasks!=null&&datas.content.tasks.length == 0){
            this.isLoadDetailData = false;
            this.getTaskBtnStatus=false;
            if (datas.content.errorMsg!=null&&datas.content.errorMsg.length>0){
              this.openHeadFlag = false;//关闭领取界面
              this.closeDetail();
              this.Toast({
                duration: 0,
                mask: true,
                message: datas.content.errorMsg
              });
            }else{
              this.Toast({
                duration: 0,
                mask: true,
                message: '没有更多数据了'
              });
            }
          }else if(typeof datas.content.tasks!='undefined'&&datas.content.tasks.length>0){
            this.openDetailFlag=true;
            if(datas.status == 100){
              this.returnDetailList=datas.content.tasks;
              this.openHeadFlag = false;//关闭领取界面
              this.refreshingDetail=false;
              // for(let item of datas.content.tasks){
              //   this.returnDetailList.push(item);
              // }
            }
            //console.log("openDetailFlag:"+this.openDetailFlag);
            //console.log("openHeadFlag:"+this.openHeadFlag);
            //console.log("refreshingDetail:"+this.refreshingDetail);
          }else{
            this.Toast.fail({
              duration: 0,
              mask: true,
              message: datas.content.errorMsg
            });
          }
          this.progress=false;
          this.getTaskBtnStatus=false;
          this.requestDetailOnce=true;
        },err =>{
          //console.log(err)
          this.progress=false;
          this.getTaskBtnStatus=false;
          this.requestDetailOnce=true;
          this.Toast.clear();
        });
      }else{
        //console.log("this.requestDetailOnce1:"+this.requestDetailOnce);
        this.requestDetailOnce=true;
        // this.progress=false;
        //console.log("this.requestDetailOnce2:"+this.requestDetailOnce);
      }

    },
    confirmChose(index, row, event){
      this.infoRow.vin=row.vin;
      this.isuredoneDialog = true;
    },
    userAction (index, row, event) {
      let data = Object.assign({},this.$store.state.user,{
        content: {
          vin: this.infoRow.vin,
        }
      });
      this.common.reqData(api.app('returnGetSingleTask'), data, res=>{
        let datas = res.data;
        if(typeof datas.content.task!='undefined'){
          switch ('out') {
            case "pickCar":
              this.$router.push({name:'pickcar', params:{vin:row.vin}});
              break;
            case "out":
              this.$router.push({name:'outlibrary', params:{vin:this.infoRow.vin}});
              break;
            case "in":
              this.$router.push({name:'inlibrary', params:{vin:row.vin}});
              break;
            case "move":
              this.$router.push({name:'transposing', params:{vin:row.vin}});
              break;
            case "fill":
              this.$router.push({name:'fill', params:{}});
              break;
            default:
              return false;
              break;
          }
        }else{
          this.Toast.fail({
            duration: 0,
            mask: true,
            message: datas.content.errorMsg
          });
        }
      },err =>{
        //console.log(err)
        this.Toast.clear();
      });
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    refresh () {
      // 下拉刷新
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.page = 0;
      this.list = [];
      this.isLoadData = true;
      this.taskQuery();
    },
    load () {// 上拉更新
      this.loading = true;
      if(this.isLoadData){
        this.page ++;
        this.taskQuery();
      }else{
        this.loading = false;
      }
    },
    refreshDetail () {
      //console.log("refreshingDetail 进入:");
      // 下拉刷新
      this.refreshingDetail = true;
      this.$refs.container.scrollTop = 0;
      this.pageDetail = 0;
      this.returnDetailList = [];
      // this.isLoadData = true;
      this.openDetailMethod();
    },
    loadDetail () {// 上拉更新
      this.loadingDetail = false;
      //console.log("loadDetail");
      // if(this.isLoadDetailData){
      //   this.pageDetail ++;
      //   this.openDetailMethod();
      // }else{
      //   this.Toast({
      //     duration: 1500,
      //     mask: true,
      //     message: "没有更多数据了"
      //   });
      //   this.loading = false;
      // }
    },
    taskQuery (value) {
      this.tableLoading = true;
      let data = Object.assign({},this.$store.state.user,{
        content: {
          param: value ? value : "",
          page: this.page
        }
      });
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('returnTaskQuery'), data, res=>{
          this.requestOnce = true;
          this.tableLoading = this.loading = this.refreshing = false;
          let datas = res.data;
          if(datas.content.tasks!=null&&datas.content.tasks.length == 0){
            this.isLoadData = false;
            if (datas.content.errorMsg!=null&&datas.content.errorMsg.length>0){
              this.Toast({
                duration: 0,
                mask: true,
                message: datas.content.errorMsg
              });
            }else{
              this.Toast({
                duration: 0,
                mask: true,
                message: '没有更多数据了'
              });
            }
          }else{
            if(datas.content.taskTime!=null&&datas.content.taskTime>0){
              this.taskTime=datas.content.taskTime;
            }
            if(datas.status == 100){
              for(let item of datas.content.tasks){
                this.list.push(item);
              }
            }else{
              this.Toast({
                duration: 0,
                mask: true,
                message: datas.msg
              });
            }
          }
        },err =>{
          this.requestOnce = true;
          //console.log(err)
          this.Toast.clear();
        });
      }
    },
    mySetInterval () {
      this.timeInterval = setInterval(() => {
        //console.log("定时刷新");
        this.refresh();
      }, this.taskTime*1000);
    },
    sureDone(){
      this.isuredoneDialog = false;
    },
    closeThisConfirm(){
      this.isuredoneDialog = false;
    },
    closeDetail(){//vin明细界面直接关闭
      this.requestDetailOnce=true;
      this.progress=false;
      this.openDetailFlag = false;
      this.getTaskBtnStatus=false;
    },
    returnHead(){//vin明细界面返回
      this.openHeadFlag=true;
      this.requestDetailOnce=true;
      this.progress=false;
      this.openDetailFlag = false;
      this.getTaskBtnStatus=false;
    },
  },
  mounted () {
    // 确定高度
    this.wrapperHeight = document.documentElement.clientHeight - 113
    this.taskQuery();
    this.mySetInterval();
  },
  destroyed () {
    clearInterval(this.timeInterval);
  },
  filters: {
    // 当标题字数超出时，超出部分显示’...‘。此处限制超出8位即触发隐藏效果
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 15) {
        return value.slice(0, 14) + '...'
      }
      return value
    },
    ellipsis2 (value) {
      if (!value) return ''
      if (value.length > 5) {
        return value.slice(0, 5) + '...'
      }
      return value
    },
    ellipsisVin (value) {
      if (!value) return ''
      if (value.length > 6) {
        return value.slice(value.length-6, value.length);
      }
      return value
    }
  }
}
</script>
<style scoped>
.container{
  padding: 0;
}
.loadmore-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.loadmore-wrap .mu-appbar {
  width: 100%;
}
.loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*.transposing{*/
/*  position: absolute;*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*}*/

.mu-table th {
  padding-left: 10px;
  padding-right: 10px;
}
.mu-table td {
  padding-left: 10px;
  padding-right: 10px;
  /*min-height: 48px;*/
  /*font-size: 13px;*/
  text-overflow: clip;
  overflow: visible;
  /*word-break: break-all;*/
  /*border-bottom: 1px solid rgba(0,0,0,.12);*/
}
.cancelBtn{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.mu-paper.mu-paper-round.mu-elevation-1{
  -webkit-box-shadow: none;
  box-shadow: none;
}

p{
  padding-left: 24px;
  padding-right: 24px;
  min-height: 48px;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
</style>
